<template>
	<view class="sales">
		<view class="header">
			<view class="form">
				<view class="select">
					<view class="text">
						<text>*</text>选择货号:
					</view>
					<view style="display: flex;align-items: center">
						<input style="flex: 1" v-model="formData.proId" type="text" placeholder="请输入货号">
						<view>
							<view style="width: 150rpx;
										height: 80rpx;
										line-height: 80rpx;
										background: #fe3430;
										border-radius: 80rpx;
										text-align: center;
										color: #fff;
										margin-left: 11px;text-indent:0" @click="openProp">
								选择
							</view>
						</view>
					</view>

				</view>
				<!-- <view class="select">
					<view class="text">
						<text>*</text>颜色:
					</view>
					<input v-model="formData.proColor" type="text" placeholder="请输入颜色">
				</view> -->
				<!-- 	<view class="select">
					<view class="text">
						<text>*</text>尺码:
					</view>
					<input type="text" placeholder="请输入尺码" v-model="formData.proSize">
				</view> -->
				<view class="select">
					<view class="text">
						<text>*</text>日期:
					</view>
					<view class="date">
						<!-- <picker mode="date" :value="formData.beginTime" @change="(e) => bindDateChange(e, 'beginTime')"> -->
						<view class="select-input" @tap="openDatePick('beginTime')">
							<view class="select-input-left">
								<text v-if="formData.beginTime">{{ formData.beginTime.split(" ")[0] }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727" size="24rpx"></u-icon>
						</view>
						<!-- </picker> -->
						<view class="date-text">到</view>
						<!-- <picker mode="date" :value="formData.endTime" @change="(e) => bindDateChange(e, 'endTime')"> -->
						<view class="select-input" @tap="openDatePick('endTime')">
							<view class="select-input-left">
								<text v-if="formData.endTime">{{ formData.endTime.split(" ")[0] }}</text>
								<text v-else>请选择</text>
							</view>
							<u-icon name="arrow-down" color="#272727"></u-icon>
						</view>
						<!-- </picker> -->
					</view>
				</view>
				<view @tap="queryData" class="btn">
					<view class="">
						查询
					</view>

				</view>
				<view class="search1">
					<view>
						<view class="">
							总销售额:{{orderAmtCountSum}}
						</view>
						<view class="">
							总数量:{{totalCountSum}}
						</view>
					</view>
					<view>
						<view class="">
							总出货量:{{orderNumCountSum}}
						</view>
						<view class="">
							总退货量:{{returnNumCountSum}}
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="article">
			<view class="article_table">
				<view class="title">
					<view class="title-item"> 货号 </view>
					<view class="title-item"> 销售额 </view>
					<!-- <view class="title-item"> 尺码 </view> -->
					<view class="title-item"> 总数量</view>
					<view class="title-item"> 出货</view>
					<view class="operate"> 退货 </view>
				</view>
				<view v-if="list.length>0">
					<view class="table_body" v-for="(item,index) in list">
						<view class="table_body_item">
							{{item.proId}}
						</view>
						<view class="table_body_item">
							{{item.orderAmt-item.returnAmt}}
						</view>
						<!-- <view class="table_body_item">
							{{item.proSize}}
						</view> -->
						<view class="table_body_item">
							{{Number(item.orderNum) -Number(item.returnNum) }}
						</view>
						<view class="num table_body_item">
							{{item.orderNum}}
						</view>
						<view class="btn1 table_body_item">
							<!-- <view class="">
								查看
							</view> -->
							{{item.returnNum}}

						</view>
					</view>
				</view>
				<view v-else>
					<u-divider textSize="34" text="暂无数据"></u-divider>
				</view>

			</view>
		</view>
		<myDatePick mode="date" @bindDateChange="bindDateChange" ref="myDatePick" :show.sync="showDate" />
		<Prop ref="child" @saveUser="saveUser" />
	</view>
</template>

<script>
	import myDatePick from "../../components/myDatePick.vue";
	import Prop from "../../components/prop.vue";
	export default {
		components: {
			myDatePick,
			Prop
		},
		computed: {
			totalCountSum() {
				let count = 0
				for (let item of this.list) {
					count += item.orderNum - item.returnNum
				}
				return Math.floor(count * 100) / 100
			},
			orderAmtCountSum() {
				let count = 0
				for (let item of this.list) {
					count += item.orderAmt - item.returnAmt
				}
				return Math.floor(count * 100) / 100
			},
			orderNumCountSum() {
				let count = 0
				for (let item of this.list) {
					count += +item.orderNum
				}
				return count
			},
			returnNumCountSum() {
				let count = 0
				for (let item of this.list) {
					count += +item.returnNum
				}
				return count
			}
		},
		async onLoad() {
			await this.getList(this.formData)
		},
		data() {
			return {
				showDate: false,
				list: [],
				dateKey: "",
				formData: {
					proId: "",
					proColor: "",
					pageNo: 1,
					pageSize: 100,
					beginTime: "",
					endTime: ""
				}
			}
		},
		onReachBottom() {
			this.formData.pageNo++
			this.getList(this.formData)
		},
		methods: {
			saveUser(data) {
				console.log(data);
				this.formData.proId = data.proId
				this.$refs.child.close();

			},
			openProp() {
				this.$refs.child.open();
			},
			openDatePick(key) {
				this.showDate = true
				this.dateKey = key
			},
			navigateTo(url) {
				// console.log(url);
				uni.navigateTo({
					url
				})
			},
			queryData() {
				this.list = []
				this.formData.pageNo = 1
				this.getList(this.formData)
			},
			bindDateChange(e) {
				let value = e;
				let key = this.dateKey
				this[key] = value;
				if (key === "endTime") {
					value = `${value} 23:59:59`;
				} else if (key === "beginTime") {
					value = `${value} 00:00:00`;
				}
				this.formData[key] = value;
				// await this.getList(this.formData)
				// console.log(value);
				// if (this.query.endTime && this.query.beginTime) {
				//   this.getList(true);
				// }
			},
			async getList(formData) {
				// uni.showLoading({
				// 	title: "加载中...",
				// });
				let requestData = uni.$u.deepClone(formData);
				Object.keys(requestData).map((item) => {
					if (requestData[item] == '' || requestData[item] == null) {
						delete requestData[item]
					}
				});
				let data = await this.$api.orderReportApi({
					data: requestData
				})

				if (data.code == 200) {
					this.list = this.list.concat(data.result.list)
					if (data.result.list <= 0 && this.list.length > 0) {
						// uni.showToast({
						// 	title: "没有更多了",
						// 	icon: "none"
						// })
					} else {
						this.totalAmt = data.result.totalAmt
						this.unpaidTotalAmt = data.result.unpaidTotalAmt
					}
					this.total = data.result.total
				}
				// uni.hideLoading();
			},

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f1f1f1;
	}

	.search1 {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		// padding: 29rpx 37rpx;



		view {
			// height: 75rpx;
			line-height: 75rpx;
			border-radius: 38px;
			text-align: center;
			margin-left: 23rpx;
		}
	}

	.sales {
		height: 100vh;
		background: #f1f1f1;

		.header {
			padding: 16rpx 29rpx;
			background-color: #fff;
		}

		.form {
			.select {
				text-indent: 1em;

				.text {
					margin: 20rpx 0;
					color: #BDBDBD;

					text {
						color: #FE3430;
					}
				}

				input {
					width: 692rpx;
					height: 94rpx;
					background: #F2F2F2;
					border-radius: 47rpx;
				}

				.input {
					display: flex;
					align-items: center;
					justify-content: space-between;

					input {
						width: 271rpx;
					}

					text {
						text-align: left;
					}
				}
			}
		}
	}

	.article {
		padding: 32rpx 17rpx;

		.article_table {
			background: #FFFFFF;
			// height: 274rpx;
			border-radius: 20rpx;
			padding: 12rpx;
			box-sizing: border-box;
			color: #272727;

			.title {
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: 1px solid #F1F1F1;

				.title-item {
					text-align: center;
					width: 110rpx;
				}

				.operate {
					width: 124rpx;
					text-align: center;
				}
			}

			.table_body {
				display: flex;
				justify-content: space-around;
				// text-align: center;
				margin-top: 20rpx;
				border-bottom: 1px solid #F1F1F1;

				.table_body_item {
					text-align: center;
					// display: flex;
					// justify-content: center;
					// align-items: center;
					width: 100rpx;
					// flex-wrap: wrap;
					// word-wrap: break-word;
					// word-break: break-all;
					overflow: auto;
				}

				.num {
					color: #FE3430;
				}

				.btn1 {
					display: flex;
					justify-content: space-around;
					align-items: center;

					view {
						background: #FE3430;
						width: 124rpx !important;
						height: 48rpx;
						line-height: 30rpx;
						border-radius: 24rpx;
						padding: 13rpx 0;
						font-size: 24rpx;
						color: #fff;
						text-align: center;
					}
				}
			}
		}

	}

	.btn {
		display: flex;
		margin-top: 29rpx;
		justify-content: space-around;

		view {
			background-image: url('/static/images/Registration/button.png');
			background-size: 280rpx 110rpx;
			width: 280rpx;
			height: 110rpx;
			border-radius: 49rpx;
			color: #fff;
			text-align: center;
			line-height: 90rpx;
		}
	}

	.form_footer {
		margin-top: 30rpx;
		padding-bottom: 15rpx;
		display: flex;
		justify-content: space-between;

		text {
			color: #FE3430;
		}
	}

	.date {
		width: 100%;
		display: flex;
		align-items: center;

		.date-text {
			padding: 0 24rpx;
			text-align: center;
		}

		picker {
			flex: 1;
		}

		.select-input {
			text-indent: 0;
			width: 100%;
			height: 94rpx;
			background: #f2f2f2;
			border-radius: 47rpx;
		}

		.select-input {
			font-size: 30rpx;
			color: #272727;
			padding: 0 36rpx;
			display: flex;
			align-items: center;

			.select-input-left {
				flex: 1;
			}
		}
	}
</style>